<template>
	<view class="bigbox">
		<view class="listitem" :class="detail||diy||ceping?'detailheight':''">
			<image v-if="diy||list" :src="img[0]"></image>
			<view v-if="detail||ceping" class="detialtext">CPU</view>
			<view class="xiangqing">{{options.cpu}}</view>
		</view>
		<view class="listitem" :class="detail||diy||ceping?'detailheight':''">
			<image v-if="diy||list" :src="img[1]"></image>
			<view v-if="detail||ceping" class="detialtext">显卡</view>
			<view class="xiangqing">{{options.xianka}}</view>
		</view>
		<view class="listitem" :class="detail||diy||ceping?'detailheight':''">
			<image v-if="diy||list" :src="img[2]"></image>
			<view v-if="detail||ceping" class="detialtext">主板</view>
			<view class="xiangqing">{{options.zhuban}}</view>
		</view>
		<view class="listitem" :class="detail||diy||ceping?'detailheight':''">
			<image v-if="diy||list" :src="img[3]"></image>
			<view v-if="detail||ceping" class="detialtext">内存</view>
			<view class="xiangqing">{{options.neicun}}</view>
		</view>
		<view class="listitem" :class="detail||diy||ceping?'detailheight':''">
			<image v-if="diy||list" :src="img[4]"></image>
			<view v-if="detail||ceping" class="detialtext">硬盘</view>
			<view class="xiangqing">{{options.yingpan}}</view>
		</view>
		<view class="listitem" :class="detail||diy||ceping?'detailheight':''">
			<image v-if="diy||list" :src="img[5]"></image>
			<view v-if="detail||ceping" class="detialtext">散热</view>
			<view v-if="detail||list" class="xiangqing">{{options.sanre}}</view>
			<view v-if="diy||ceping" class="xiangqing">{{options.sanreqi}}</view>
		</view>
		<view class="listitem" :class="detail||diy||ceping?'detailheight':''">
			<image v-if="diy||list" :src="img[6]"></image>
			<view v-if="detail||ceping" class="detialtext">电源</view>
			<view class="xiangqing">{{options.dianyuan}}</view>
		</view>
		<view class="listitem" :class="detail||diy||ceping?'detailheight':''">
			<image v-if="diy||list" :src="img[7]"></image>
			<view v-if="detail||ceping" class="detialtext">机箱</view>
			<view class="xiangqing">{{options.jixiang}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"OptionList",
		data() {
			return {
				img:[
					'/static/image/zujian-checked/cpu.png',
					'/static/image/zujian-checked/xianka.png',
					'/static/image/zujian-checked/zhuban.png',
					'/static/image/zujian-checked/neicun.png',
					'/static/image/zujian-checked/yingpan.png',
					'/static/image/zujian-checked/sanre.png',
					'/static/image/zujian-checked/dianyuan.png',
					'/static/image/zujian-checked/jixiang.png',
				]
			};
		},
		props:{
			options:{
				type:Object,
				required:true
			},
			list:{
				type:Boolean,
				required:false,
				default:false
			},
			detail:{
				type:Boolean,
				required:false,
				default:false
			},
			diy:{
				type:Boolean,
				required:false,
				default:false
			},
			ceping:{
				type:Boolean,
				required:false,
				default:false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bigbox{
		padding-left: 2vw;
	}
	image{
		width: 20px;
		height: 20px;
	}
	.listitem{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 1vh 0;
		color: #1296db;
		border-bottom: 1px solid #bdbdbd;
		.xiangqing{
			width: 300px;
			margin-left: 10px;
			font-size: 14px;
			font-weight: bold;
		}
	}
	.detailheight{
		padding: 2vh 0;
	}
	.detialtext{
		color: #000000;
		width:40px !important;
		text-align: center;
		font-size: 14px;
	}
</style>
